import React, { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { NavBar } from 'antd-mobile'
import { Input, Cell, Button ,CountDown} from 'react-vant'
import { Lock } from '@react-vant/icons';
import '../css/Gzh_Login.scss'
import {put,post} from '../../../axios/request'
export default function ForgetPwd() {
  const navgate = useNavigate()
  const [tel, setTel] = useState('')
  const [yzm, setYzm] = useState('')
  const [flag, setFlag] = useState(false)
  const [pwd, setPwd] = useState('')
  const test=/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
  const sendyzm = async () => {
    const { code } = await post('/sendyzm', { phone: tel })
    console.log(code)
    if (code === 200) {
      setFlag(true)
      alert('验证码已发送')

    }
  }
  const edit=async()=>{
      let {code}=await put('/edit',{tel,pwd,yzm})
      if(code===200){
        navgate('/login')
      }else{
        alert('修改失败,验证码不正确')
      }
  }
  return (
    <div id='login'>
      <NavBar onBack={() => { navgate('/app') }}
        style={{ '--border-bottom': '.0238rem #eee solid' }}
      ></NavBar>
      <h1 style={{ marginLeft: '16.8px', fontSize: '.619rem ', fontWeight: 'bold', marginTop: '12.6px' }}>忘记密码</h1>
      <Cell>
        <Input
          prefix="+86"
          value={tel}
          style={{ borderBottom: '.0238rem #71acfd solid', height: '42px' }}
          onChange={text => setTel(text)} 
          placeholder='请输入手机号码'
          clearable
          maxLength={11}
         v/>
      </Cell>
      <Cell>
        <Input
          prefix={<Lock style={{ width: '21px' }} />}
          value={yzm}
          style={{ borderBottom: '.0238rem #ccc solid', height: '42px' }}
          onChange={text => setYzm(text)}
          suffix={flag?<div onClick={()=>{setFlag(!flag)}} style={{display:'flex',alignItems:'center'}}><CountDown time={60*1000} format='ss'/><span>s后重新获取</span></div>:<div  onClick={()=>{sendyzm()}} style={{ borderLeft: '.0238rem solid #cccccc', color: test.test(tel) ? '#1778fb' : '#ccc', width: '147px', textAlign: 'center' }}>获取验证码</div>}
          placeholder='请输入验证码'
          clearable
          maxLength={4}
        />
      </Cell>
      <Cell>
        <Input
          prefix={<Lock style={{ width: '21px' }} />}
          value={pwd}
          style={{borderBottom: '.0238rem #ccc solid', height: '42px', }}
          onChange={text => setPwd(text)}
          placeholder='请输入新密码'
          clearable
          type='password'
        />
      </Cell>
      <div className='login_btn'>
        <Button  onClick={()=>{edit()}} style={{ width: '336px', margin: '21px auto', height: '42px', backgroundColor: tel && yzm&&pwd ? '#1778fb' : '#ccc', border: 'none' }} type='primary' block round> 确认</Button>
      </div>
      <div className='login_bottom'>
        <span style={{ fontSize: '12.6px' }}>登录即同意<span style={{ color: '#1778fb' }}>《用户服务协议》</span>和<span style={{ color: '#1778fb' }}>《隐私政策》</span></span>
      </div>
    </div>
  )
}
